<template>
	<!-- 计划农事 -->
	<view class="content">
		<!-- 标题 -->
		<view class="title">
			<image class="titleIcon" src="/static/index/leftTI.png" mode=""></image>
			农事活动：{{$util.getDictData('produce_husbandry_events',formData.husbandryEvents)}}
		</view>
		<view class="form-item justify-between align-center">
			<view class="left">
				执行时间:
			</view>
			<view class="right justify-between align-center">
				<view class="timeTips">{{$util.timestampToTime(formData.executeTime)}}</view>
			</view>
		</view>
		<view class="form-item justify-between align-center">
			<view class="left">
				耗时:
			</view>
			<view class="right justify-between align-center">
				{{formData.take}}/小时
			</view>
		</view>
		<view class="form-item justify-between align-start">
			<view class="left justify-between align-start">
				<view style="white-space: nowrap;">
					投入品:
				</view>
				<view class="center-list" v-if="formData.inputUpdateReqVOSLen">
					<view class="inputs-list-item" v-for="item in formData.inputUpdateReqVOS">
						{{item.inputName}} * {{item.inputCount}}
					</view>
				</view>
			</view>
			<view class="right" v-if="formData.inputUpdateReqVOSLen==0">
				<view class="inputs">空</view>
			</view>
		</view>
		<!-- 图片 -->
		<view class="img">
			<view class="img-title">
				农事图片：
			</view>
			<view class="upload-item flex-wrap">
				<image v-for="(item,index) in formData.husbandryImg" :key="index" class="image" :src="item" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
import {getHusbandryOne} from '@/api/my/husbandry.js'

export default {
		data() {
			return {
				id: '',
				formData: {},
			}
		},
		methods: {
			async getHusbandryOneFn() {
				let res = await getHusbandryOne({
					id: this.id
				});
				this.formData = res;
				this.formData.inputUpdateReqVOS = this.formData.inputUpdateReqVOS.filter((item,index)=>{
					return item.inputName!==null
				})
				if(this.formData.inputUpdateReqVOS){
					this.formData.inputUpdateReqVOSLen=this.formData.inputUpdateReqVOS.length||0;
				}
				console.log(this.formData.inputUpdateReqVOS);
				this.formData.husbandryImg = (this.formData.husbandryImg || '').split(',');
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getHusbandryOneFn()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 2rem 1rem 0;
		font-size: 1.4rem;
		.title {
			display: flex;
			align-items: center;
			font-weight: bold;
			color: #333;

			.titleIcon {
				height: 1.5rem;
				width: .5rem;
				margin-right: .5rem;
			}
		}

		.form-item {
			margin-top: 1.5rem;
			padding-bottom: .5rem;
			line-height: 3.5rem;
			border-bottom: .1rem solid rgba(153, 153, 153, 0.1);

			.timeTips {
				font-size: 1.2rem;
			}

			.rightIcon {
				margin: 1.15rem 0;
				width: 1.2rem;
				height: 1.2rem;
			}

			.takeTime {
				width: 10rem;
				font-size: 1.2rem;
				text-align: right;
			}

			.inputs {
				width: 10rem;
				height: 2rem;
				font-size: 1.2rem;
				text-align: right;
			}

			.center-list {
				display: flex;
				flex-flow: wrap;

				.inputs-list-item {
					position: relative;
					color: #333;
					height: 2.5rem;
					padding: 0 .5rem;
					background: #ddd;
					border-radius: .4rem;
					text-align: center;
					line-height: 2.5rem;
					margin: .5rem;

					.closeIcon {
						width: 1rem;
						height: 1rem;
						position: absolute;
						top: 0;
						right: 0;
						transform: translate(10%, -10%);
					}
				}
			}
		}

		// 上传图片
		.img {
			margin-top: 1.5rem;
		.upload-item{
			
			.image{
				width: 200rpx;
				height: 200rpx;
				margin: .5rem;
				border-radius: .8rem;
			}
		}
		}
	}
	
</style>
